<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                     initial-scale=1.0,
                                     maximum-scale=1.0,
                                     user-scalable=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>model_download</title>
    <style type="text/css">
        .mytable{
            border: black solid 1px;
        }
        .mytable th{
            border: black solid 1px;
            text-align: center;

        }
        .mytable tr{
            border: black solid 1px;
            height: 20px;
        }
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination li {display: inline;}

        ul.pagination li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }
        ul.pagination li a.active {
            background-color: #4CAF50;
            color: white;
        }
        ul.pagination li a:hover:not(.active) {background-color: #ddd;}
    </style>
</head>
<body>
    <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item ">
                        <a class="nav-link " href="welcome.jsp">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="model_construct_FCNN.html">模型构建<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="model_train.html">模型训练</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="model_download.html">模型下载</a>
                    </li>
                </ul>
                <h5 style="height: 10px;" align="right"><a id="username" class="user"></a> &nbsp;</h5>
            </div>
        </nav>
    </div>
    <div style="margin-top: 10px">
        <div style="width: 60%;height:500px;float: left">
            <div style="margin-bottom: 10px;margin-left: 10px">

                车次：<input id="input_train_number" type="text" style="width: 50px" onchange="getDeviceInfo()"/>
                &nbsp;车辆号：<input id="input_cycle_number" type="number" style="width: 70px" onchange="getDeviceInfo()"/>
                &nbsp;转向架号：<input id="input_bogie_number" type="number" style="width: 40px" onchange="getDeviceInfo()"/>
                &nbsp;版本号：<input id="input_version" type="text" style="width: 50px" onchange="getDeviceInfo()"/>
                &nbsp;status：<select id="input_status" onchange="getDeviceInfo()">
                                        <option value="0"></option>
                                        <option value="1">在线</option>
                                        <option value="2">离线</option>
                                </select>

            </div>

            <div style="height: 80%;overflow: auto;margin-left: 10px">
                <table id="show_table" class="mytable" width="100%" >
                    <tr>
                        <th>车次</th>
                        <th>车辆号</th>
                        <th>转向架</th>
                        <th>版本号</th>
                        <th style="width: 200px">status</th>
                    </tr>
                </table>
            </div>

            <div>
                <div style="width:30%;float: left;margin-top: 25px;text-align: center">
                    每页
                    <select style="width: 50px" id="itemsPerPage" onchange="setItemsPerPag()">
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                        <option value="25">25</option>
                        <option value="30">30</option>
                    </select>
                    条数据
                </div>
                <div style="width:40%;margin-top: 25px;float: left;" align="center">
                    <ul class="pagination" id="indexPage">
                        <li><a >«</a></li>
                        <li><a class="active">1</a></li>
                        <li><a>»</a></li>
                    </ul>
                </div>
                <div style="width:30%;margin-top: 30px;float: left;">
                    <p id="sumNumberOfSignal">共0条数据,0页</p>
                </div>
            </div>
        </div>
        <div style="width: 40%;height:500px;float:left;">
            <div style="width: 25%;height: 100%;float: left">
                <input type="button" style="margin-left: 20%;margin-top:120px; width: 80px;"  onclick="addAllDevice()" value="全选">
                <input type="button" style="margin-left: 20%;margin-top:40px; width: 80px;"  onclick="inverseAddAllDevice()" value="反选">
                <input type="button" style="margin-left: 20%;margin-top:40px; width: 70px;"  onclick="addAllSelectDevice()" value="Add">
            </div>
            <div style="width: 70%;height: 100%;margin-right: 10px;float: left">
                <input type="button" style="width: 80px" value="批量删除" onclick="deleteSelectTableOfToShow()"></br>
                <div style="width: 100%;height: 80% ;margin-top:10px;overflow: auto;border: 2px solid black;" >
                    <table border="0" style="margin-right:10px" id="tableOfToShow">
                    </table>
                </div>
                <div>
                    选择模型：
                    <select id="select_model" style="width: 25%">

                    </select>
                    选择参数：
                    <select id="select_model_history" style="width: 25%">
                        <option>2020-6-5_20:58</option>
                    </select>
                </div>
                <input type="button" value="下载" style="margin-left: 40%;margin-top: 20px"/>
                <a href="#">模型下载日志</a>
            </div>
        </div>
    </div>
</body>
<script src="../resource/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../resource/js/jquery.js"></script>
<script type="text/javascript" src="../resource/js/colResizable-1.6.min.js"></script>
<script>
    function inverseAddAllDevice() {
        var show_table = document.getElementById("show_table");
        var trs = show_table.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++)
        {
            var tds = trs[i].getElementsByTagName('input');
            for(var j=0;j<tds.length;j++)
            {
                tds[j].checked=!tds[j].checked;
            }
        }

    }
    function  addAllDevice() {
        var show_table = document.getElementById("show_table");
        var trs = show_table.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++)
        {
            var tds = trs[i].getElementsByTagName('input');
            for(var j=0;j<tds.length;j++)
            {
                tds[j].checked=true;
            }
        }
    }
    window.onload = function (ev) {
        var user = document.getElementById("username");
        var xhr = new XMLHttpRequest();
        xhr.open("POST","../GetUserName",true);
        xhr.send();
        xhr.onreadystatechange = function (ev1) {
            if(xhr.readyState==4&&xhr.status==200)
            {
                var content = xhr.responseText;
                if(content=="no,relogin")
                {
                    user.innerText = "请重新登录";
                    user.href = "login.jsp";
                }
                else
                {
                    user.innerText = content;
                    user.href = "user.html";
                }
            }

        }
        getModel();
    };
    var DeviceInfoList=null ;
    var itemsPerPage = 10;
    function setItemsPerPag() {
        var items = document.getElementById("itemsPerPage");
        var sumNumber = document.getElementById("sumNumberOfSignal");
        itemsPerPage = items.value;
        sumNumber.innerText = "共"+DeviceInfoList.length+"条数据，共"+Math.ceil(DeviceInfoList.length/itemsPerPage)+"页";
        setPageIndex_show(1);
        setSignalTable(1);

    }
    function getDeviceInfo() {
        var sumNumber = document.getElementById("sumNumberOfSignal");
        var TrainNumber = document.getElementById("input_train_number");
        var VehicleNumber = document.getElementById("input_cycle_number");
        var Bogie = document.getElementById("input_bogie_number");
        var Version = document.getElementById("input_version");
        var Status = document.getElementById("input_status");
        var formdata = new FormData();
        formdata.append("TrainNumber",TrainNumber.value);
        formdata.append("VehicleNumber",VehicleNumber.value);
        formdata.append("Bogie",Bogie.value);
        formdata.append("Version",Version.value);
        formdata.append("Status",Status.value);
        var xhr = new XMLHttpRequest();
        xhr.open("POST","../QueryDeviceInfo",true);
        xhr.send(formdata);
        xhr.onreadystatechange = function (ev) {
            if(xhr.readyState==4&&xhr.status==200)
            {
                var content = xhr.responseText;
                var str = JSON.parse(content);
                DeviceInfoList = str;
                sumNumber.innerText = "共"+DeviceInfoList.length+"条数据，共"+Math.ceil(DeviceInfoList.length/itemsPerPage)+"页";
                setPageIndex_show(1);
                setDeviceInfoTable(1);
            }
        };
    }
    var activeIndex = 1;
    function setPageIndex(x)
    {
        if(x==-1)
        {
            if(activeIndex!=1)//首页，不减
            {
                activeIndex = activeIndex - 1;
            }
        }
        if(x==-2)
        {
            if(activeIndex!=Math.ceil(DeviceInfoList.length/itemsPerPage))//末页，不加
            {
                activeIndex = activeIndex + 1;
            }

        }
        if(x!=-1&&x!=-2)
        {
            activeIndex = x;
        }
        setPageIndex_show(activeIndex);
        setSignalTable(activeIndex);
    }
    function setPageIndex_show(x) {
        var indexPage = document.getElementById("indexPage");
        var str="";
        var length = DeviceInfoList.length;
        var pageNum = Math.ceil(DeviceInfoList.length/itemsPerPage);
        str += "<li onclick='setPageIndex(-1)'><a >«</a></li>";
        for(var i=1;i<=pageNum;i++)
        {
            if(i!=x)
            {
                str+="<li onclick='setPageIndex("+i+")'><a >"+i+"</a><li>";
            }
            else
            {
                str+="<li onclick='setPageIndex("+i+")'><a class='active'>"+i+"</a><li>";
            }

        }
        str += "<li onclick='setPageIndex(-2)'><a>»</a></li>";
        indexPage.innerHTML = str;
    }

    function setDeviceInfoTable(x)
    {
        var table = document.getElementById("show_table");
        var str="<tr> <th>车次</th><th>车辆号</th>" +
            "<th>转向架</th><th>版本号</th><th style=\"width: 200px\">status</th></tr>";
        var start= (x-1)*itemsPerPage;
        var end=x*itemsPerPage;
        var i = start;
        var length = DeviceInfoList.length;
        for(;i<end&&(i<length);i++)
        {
            str+="<tr><th>"+DeviceInfoList[i].trainNumber
                +"</th><th>"+DeviceInfoList[i].vehicleNumber
                + "</th><th>"+DeviceInfoList[i].bogie
                + "</th><th>"+DeviceInfoList[i].version;
            if(DeviceInfoList[i].status==1)
            {
                str+="</th><th style=\"width: 200px\"><p style='color: green'>running<input type='checkbox'></p></th>"+"<tr>";
            }
            else
            {
                str+="</th><th style=\"width: 200px\"><p style='color: red'>offline<input type='checkbox'></p>"+"</th><tr>";
            }

        }
        table.innerHTML = str;

    }
    var model_list=null;
    function getModel() {
        var model = document.getElementById("select_model");
        var xhr = new XMLHttpRequest();
        xhr.open("post", "../QueryModel", true);
        xhr.send();

        xhr.onreadystatechange = function (ev1) {
            if ((xhr.readyState == 4) && (xhr.status) == 200) {
                var content = xhr.responseText;
                var str = JSON.parse(content);
                var model_str="";
                model_list = str;
                var obj = new Object();
                obj.name = "";
                obj.path = "";
                for (var i = 0; i < str.length; i++) {
                    obj = str[i];
                    model_str += "<option value=\"";
                    model_str += i + "\">";
                    model_str += obj.name;
                    model_str += "</option>";
                }
                model.innerHTML = model_str;
            } else {

            }

        }
    }
    var checkedList = new Array();

    var Pos = function (x,y) {
        var obj = new Object();
        obj.x = x;
        obj.y = y;
        return obj;
    };
    function getAllSelectDevice()
    {
        checkedList = new Array();
        var show_table = document.getElementById("show_table");
        var trs = show_table.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++)
        {
            var tds = trs[i].getElementsByTagName('input');
            for(var j=0;j<tds.length;j++)
            {
                if(tds[j].checked)
                {
                    var pos = new Pos(i,j);
                    checkedList.push(pos);
                }
            }
        }
    }
    var toShowList = new Array();
    function addAllSelectDevice()
    {
        getAllSelectDevice();
        var isdistinct = 0;
        for(var i=0;i<checkedList.length;i++)
        {
            isdistinct = 1;
            var j = checkedList[i].x + (activeIndex-1)*itemsPerPage-1;
            var value = DeviceInfoList[j];
            var stringToShow = value.trainNumber+" "+value.vehicleNumber+
                " "+value.bogie+" "+value.version+" "+checkedList[i].y;
            for(var k=0;k<toShowList.length;k++)
            {
                if(toShowList[k]==stringToShow)
                {
                    isdistinct = 0;
                    break;
                }
            }
            if(isdistinct==1)
                toShowList.push(stringToShow);

        }
        reShowToShow();
    }
    function reShowToShow()
    {
        var tableOfToShow = document.getElementById("tableOfToShow");
        var str="";
        for(var i=0;i<toShowList.length;i++)
        {
            str += "<tr>\n" +
                "                    <td><input type=\"checkbox\">\n" +
                "                    </td>\n" +
                "                    <td width=\"300px\" align=\"center\">"+toShowList[i].toString()+"</td>\n" +
                "                    <td width=\"40px\">\n" +
                "                        <button class=\"delete\" type=\"button\" value='"+i+"' onclick='deleteOneRowTableOfToShow(this)'></button>\n" +
                "                    </td>\n" +
                "                </tr>";
        }
        tableOfToShow.innerHTML = str;

    }

    function deleteSelectTableOfToShow()
    {
        selectOfToShowTable = new Array();
        var toShowTable = document.getElementById("tableOfToShow");
        var trs = toShowTable.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++)
        {
            var tds = trs[i].getElementsByTagName('input');
            if(tds[0].checked)
            {
                selectOfToShowTable.push(i);
            }
        }
        for(var i=0;i<selectOfToShowTable.length;i++)
        {
            toShowList.splice(selectOfToShowTable[i]-i,1);
        }
        reShowToShow();
    }
    function deleteOneRowTableOfToShow(x)
    {
        var value = x.value;
        toShowList.splice(value,1);
        reShowToShow();
    }
    $(function(){
        $("table").colResizable();
    });

</script>

</html>